<template>
    <li class="rx-option" :class="{
      'selected':select.value===value,
      'disabled':disabled
    }" @click="select.updateValue(value,label,info||{value,label})">
      <slot><span>{{label}}</span></slot>
    </li>
                <!-- <li class="rx-select-list__item" v-for="item in list"
              :value="item[optionValue]" :key="item[optionValue]" @click="updateValue(item[optionValue],item)"
              :class="{
                'is-active':item[optionValue]===value
              }">{{item[optionLabel]}}</li> -->
</template>
<script>

export default {
    name:'rx-option',
    inject:['select'],
    props:{
        label:{
            required:true
        },
        value:{
            required:true
        },
        disabled:{
          type:Boolean,
          default:false
        },
        info:{
          type:Object
        }
    },
    created(){
      this.select.optionNum++;
      if(this.select.value===this.value){
        this.select.label=this.label;
      }
    },
    destroyed () {
      this.select.optionNum--;
    }
}
</script>
<style lang="scss">
.rx-option{
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  cursor: default;

  &:hover{
    background-color: #f5f7fa;
  }
  &.selected{
    color: #409eff;
  }
}
</style>


